import { StyleSheet, Text, View, Image, Pressable, Linking } from 'react-native';
import React from 'react';
import { useTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/Ionicons';
import { displayName, version, companyName, downloadApkUrl, appStoreUrl } from '!/app.json';
import { NavBarHeader } from '~/components';
import { px2dp, scale, onePx, isIos } from '~/utils/px2dp';

export default function AboutUs() {
    const { t } = useTranslation();
    const updateVerion = () => {
        if (isIos()) {
            Linking.openURL(appStoreUrl);
        } else {
            Linking.openURL(downloadApkUrl);
        }
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('AboutUs.title')} />
            <View style={styles.content}>
                <View style={styles.header}>
                    <Image
                        source={{
                            uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/10/44574202510091417565820.png',
                        }}
                        style={styles.logo}
                    />
                    <Text style={styles.appName}>{displayName}</Text>
                    <Text style={styles.version}>
                        {t('AboutUs.t1')}：{version}
                    </Text>
                </View>
                <Pressable style={[styles.listItem, styles.row]} onPress={updateVerion}>
                    <Text style={styles.list_text}>{t('AboutUs.t2')}</Text>
                    <View style={styles.row}>
                        <Icon name="chevron-forward-outline" size={18} color="#a4a4a4"></Icon>
                    </View>
                </Pressable>
            </View>
            <View style={styles.postionBottom}>
                <Text style={styles.version}>{companyName}</Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        alignItems: 'center',
        flexDirection: 'row',
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    logo: {
        width: px2dp(180),
        height: px2dp(180),
    },
    content: {
        marginTop: '10%',
    },
    appName: {
        color: '#000',
        fontSize: scale(30),
        marginVertical: px2dp(24),
        textAlign: 'center',
    },
    icp: {
        color: '#a4a4a4',
        fontSize: scale(24),
        marginBottom: px2dp(12),
        textAlign: 'center',
    },
    version: {
        color: '#a4a4a4',
        fontSize: scale(24),
    },
    header: {
        marginBottom: px2dp(64),
        alignSelf: 'center',
        alignItems: 'center',
    },
    listItem: {
        justifyContent: 'space-between',
        borderBottomWidth: onePx,
        borderColor: '#eee',
        paddingBottom: px2dp(12),
        height: px2dp(80),
        marginTop: px2dp(32),
        marginHorizontal: px2dp(32),
    },
    list_text: {
        color: '#000',
        fontSize: scale(28),
        fontWeight: 'bold',
    },
    postionBottom: {
        position: 'absolute',
        bottom: '5%',
        alignSelf: 'center',
    },
});
